<template>
  <div class="bg-white w-full h-full">
    <div class="text-[#6F6F6F] text-[14px] ml-3">发送任务管理</div>
    <div class="overflow-y-auto mt-2 h-[calc(100%-108px)] px-2">
      <div
        class="min-w-[260px] grid grid-cols-[minmax(auto,7%)minmax(auto,50%)minmax(auto,43%)] gap-1 text-[#000000] text-[12px]"
      >
        <div></div>
        <div class="font-bold text-center">产品标题</div>
        <div class="font-bold text-right mb-1">发送时间</div>
        <template v-for="(item, index) in data" :key="index">
          <div class="text-right pr-2">
            <Checkbox v-model:checked="item.checked" />
          </div>
          <div class="text-left overflow-hidden text-ellipsis text-nowrap text-[#00A0E9]">
            <a @click="() => (item.checked = !item.checked)">{{
              (item?.id ?? '1') + '.' + item.product_title + item.product_title + item.product_title
            }}</a>
          </div>
          <div class="text-right overflow-hidden text-ellipsis text-nowrap">
            {{ item.add_time }}
          </div>
        </template>
      </div>
      <div class="absolute left-0 right-0 bottom-0 flex flex-col gap-2 m-2">
        <div class="text-[12px] w-full">
          <Checkbox
            class="text-[12px] ml-1"
            v-model:checked="checkState.checkAll"
            :indeterminate="checkState.indeterminate"
            @change="onCheckAllChange"
            >全选</Checkbox
          >
          <Popconfirm
            placement="top"
            ok-text="是"
            cancel-text="否"
            :class="[checkState.checkedLength == 0 ? 'opacity-50' : 'cursor-pointer']"
            :disabled="checkState.checkedLength == 0"
            :title="'确认删除吗?'"
            @confirm="() => handleDeleteTask()"
          >
            <img :src="Delete" class="inline-block select-none w-[17px] h-[17px] mt-[-2px]" />
            <span class="text-[#FF5D5D] ps-1">删除</span>
          </Popconfirm>
        </div>
        <div class="w-full flex justify-end">
          <Pagination
            :total="pagination.total"
            :max-visible-pages="2"
            :show-mask="false"
            v-model:current-page="pagination.currentPage"
            v-model:page-size="pagination.pageSize"
            @change="() => getDataList()"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getTeamTaskDetailListApi, deleteTaskApi } from '@main/service/team';
import Delete from '@main/assets/images/workflow/delete.webp';
import Pagination from '@shared/components/pagination/index.vue';
import { ref, onMounted, computed } from 'vue';
import { Checkbox, Popconfirm, message } from 'ant-design-vue';
import type { TaskDetailList } from '@main/service/team/type';
interface DataItem extends TaskDetailList {
  checked: boolean;
}
const pagination = ref({
  currentPage: 1,
  pageSize: 20,
  total: 0
});
const data = ref<DataItem[]>([]);

const handleDeleteTask = () => {
  const checkedIds = data.value.filter((x) => x.checked).map((x) => x.id);
  deleteTaskApi(checkedIds).then((res) => {
    if (res) {
      message.success('删除成功');
      getDataList();
    } else message.error('删除失败');
  });
};

const getDataList = () => {
  const params = {
    pageNumber: pagination.value.currentPage,
    pageSize: pagination.value.pageSize
  };
  getTeamTaskDetailListApi(params).then((res) => {
    pagination.value.total = res.total;
    data.value = res.items.map((item) => ({
      ...item,
      checked: false
    }));
  });
};

onMounted(() => {
  getDataList();
});

const checkState = computed(() => {
  let checkedList = data.value.filter((x) => x.checked);
  return {
    indeterminate: !!checkedList.length && checkedList.length < data.value.length,
    checkAll: checkedList.length === data.value.length,
    checkedLength: checkedList.length
  };
});

const onCheckAllChange = (e: any) => {
  checkState.value.indeterminate = false;
  data.value.forEach((x) => {
    x.checked = e.target.checked;
  });
};
</script>
<style lang="less" scoped>
:deep(.ant-checkbox + span) {
  padding-inline-start: 4px;
}
</style>
